<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="big-box">
					<div class="center">
						<image src="../../../static/img/zhuyi.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;"></image>
						<span class="jiu-font24-555" style="color: #FF9E3E;margin-left: 1.07vw;">请填写银联银行卡信息</span>
					</div>
					<div class="inpue-box">
						<div class="left center">
							<span class="jiu-font28-aaa right8">持卡人</span>
							<input type="text" placeholder="请输入" placeholder-class="jiu-font28-555" v-model="acctname">
						</div>
					</div>
					
					<div class="inpue-box">
						<div class="left center" style="width: 100%;">
							<span class="jiu-font28-aaa right427">银行卡号</span>
							<input type="text" placeholder="请输入" placeholder-class="jiu-font28-555" v-model="acctno" style="width: 100%;">
						</div>
					</div>
					
					<picker mode="selector" :value="cardIndex" :range="cardType" @change="onChange">
						<div class="inpue-box">
							<div class="left center">
								<span class="jiu-font28-aaa right8">卡类型</span>
								<span class="font-ffc">{{ cardType[cardIndex] }}</span>
							</div>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
						</div>
					</picker>

					<block v-if="cardIndex == 1">
						<div class="inpue-box">
							<div class="left center" style="width: 100%;">
								<span class="jiu-font28-aaa right8" style="width: 10.93vw;">CVV2</span>
								<input type="text" placeholder="请输入卡背签名栏末3位数字" placeholder-class="jiu-font28-555" v-model="cvv2" >
							</div>
						</div>
						
						<picker mode="date" fields="month" @change="selectDate">
							<div class="inpue-box">
								<div class="left center">
									<span class="jiu-font28-aaa right8">有效期</span>
									<input type="text" placeholder="请输入信用卡有效期" placeholder-class="jiu-font28-555" v-model="validdate">
								</div>
							</div>
						</picker>
					</block>
					
					
					<div class="inpue-box">
						<div class="left center">
							<span class="jiu-font28-aaa right8">证件号</span>
							<input type="text" placeholder="请输入身份证号" placeholder-class="jiu-font28-555" v-model="idno" maxlength="18" style="width: 100%;">
						</div>
					</div>
					
					<div class="inpue-box">
						<div class="left center">
							<span class="jiu-font28-aaa right427">手机号码</span>
							<input type="text" placeholder="银行卡绑定的手机号" placeholder-class="jiu-font28-555" v-model="mobile" maxlength="11">
						</div>
					</div>
					
					<div class="inpue-box" style="padding-top: 4.8vw;padding-bottom: 4.8vw;">
						<div class="left center">
							<span class="jiu-font28-aaa right8">验证码</span>
							<input type="text" placeholder="请输入绑定验证码" placeholder-class="jiu-font28-555" v-model="smsCode">
						</div>
						<div class="send-btn" @tap="onPaySigning">{{ sendText }}</div>
					</div>
					
					<div class="center" style="margin-top: 2.67vw;align-items: flex-start;">
						<image src="../../../static/img/zhuyi.png" mode="aspectFill" style="width: 4.27vw;height: 4.27vw;flex-shrink: 0;"></image>
						<span class="jiu-font24-555" style="color: #FF9E3E;margin-left: 1.07vw;">可绑定银行：1.工商银行；2.中信银行；3.上海银行；4.光大银行；5.民生银行；6.平安银行；7.广发银行；8.建设银行；9.浦发银行；10.邮储银行</span>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div class="footer-box">
					<span class="footer-btn" @tap="onConfirm">绑定</span>
				</div>
			</div>
		</ma-body>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				cardType: ['借记卡','信用卡'],
				cardIndex: 0,
				acctname: '', //用户名
				acctno: '', //银行卡号
				cvv2: '', //信用卡cvv2
				validdate: '', //信用卡有效期
				idno: '', //身份证号
				mobile: '', //手机号码
				sendText: '发送',
				timer: null,
				signId: '',
				smsCode: '',
				cardTypeList: ['debit','credit']
			}
		},
		methods:{
			onPaySigning(){
				if(this.mobile == '') return uni.showToast({
					icon: 'none',
					title: '请将信息补充完整'
				})
				if(this.$u.test.mobile(this.mobile) == false){
					uni.showToast({
						icon: 'none',
						title: '请填写正确的手机号'
					})
					return;
				} 
				if(this.$u.test.idCard(this.idno) == false) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的身份证号码'
					})
					return;
				} 
				if(this.acctno.length == 0 || this.acctname.length == 0){
					uni.showToast({
						icon: 'none',
						title: '请将银行卡信息填写完整'
					})
					return;
				}
				let acctno = this.acctno.replace(/\s*/g,"");
				let idno = this.idno.toUpperCase();
				let data = {
					acctname: this.acctname, 
					idno: idno,
					idtype: 1,
					mobile: this.mobile,
					acctno: acctno,
					accttype: this.cardTypeList[this.cardIndex]
				};
				if(this.cardIndex == 1){
					data.cvv2 = this.cvv2;
					data.validdate = this.validdate.slice(2,this.validdate.length);
				}
				const TIME_COUNT = 60;
				if (this.count > 0 && this.count <= TIME_COUNT) return;
				
				this.$u.api.onSigningApply(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '验证码已经发送，若未收到请检查手机号码'
					})
					console.log(res)
					this.signId = res.msg;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
								this.sendText = `${this.count}秒`
							} else {
								clearInterval(this.timer);
								this.timer = null;
								this.sendText = '再次发送'
							}
						}, 1000)
					}
				}).catch(err=>{
					uni.showToast({
						icon: 'none',
						title: err
					})
				})
				
				
			},
			onChange(e){
				console.log(e)
				this.cardIndex = e.detail.value;
			},
			onConfirm(){
				if(this.smsCode.length < 4){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的验证码'
					})
					return;
				}
				
				let data = {
					smsCode: this.smsCode,
					signingId: this.signId
				}
				this.$u.api.onSigningConfirm(data).then(res=>{
					console.log(res)
					this.$store.dispatch('user/getMyInfo')
					uni.navigateBack({
						delta: 1
					})
				})
			},
			selectDate(e){
				console.log(e)
				this.validdate = e.detail.value.replace(/-/g,'/');
			}
		}
	}
</script>

<style lang="scss">
	.jiu-font28-aaa{
		flex-shrink: 0;
	}
	.font-ffc{
		color: #ffCe80;
		font-size: 3.73vw;
		font-weight: 300;
	}
	.center{
		display: flex;
		align-items: center;
	}
	.image427{
		width: 4.27vw;
		height: 4.27vw;
	}
	.right427{
		margin-right: 4.27vw;
	}
	.right8{
		margin-right: 8vw;
		flex-shrink: 0;
	}
	.big-box{
		padding-top: 13.87vw;
		padding-left: 5.33vw;
		.inpue-box{
			padding: 6.4vw;
			padding-right: 5.33vw;
			background-color: #1b1b1b;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 2.67vw;
			border-radius: 12.8vw 0 0 12.8vw;
			
			.send-btn{
				width: 17.07vw;
				line-height: 8.53vw;
				text-align: center;
				background: #A972FF;
				box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
				border-radius: 5.33vw;
				color: #000;
				font-size: 3.2vw;
				font-weight: 500;
			}
		}
	}
	.footer-box{
		padding: 2.13vw 5.33vw;
		background-color: #1b1b1b;
		.footer-btn{
			display: block;
			width: 100%;
			line-height: 12.8vw;
			text-align: center;
			border-radius: 6.4vw;
			color: #000;
			font-size: 3.73vw;
			font-weight: 500;
			background: #A972FF;
			box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.48);
		}
	}
	input{
		font-size: 3.73vw;
		font-weight: 300;
		color: #ffCe80;
		width: 100%;
		.jiu-font28-555{
			font-weight: 300;
		}
	}
</style>